<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">

        <el-row type="flex" justify="end">
          <el-button size="medium" type="primary" round justify="end" @click="addUserFn">添加用户</el-button>
        </el-row>

        <el-table :data="userInfo" style="width: 100%" border>
          <el-table-column prop="username" label="用户" min-width="180" align="center" />
          <el-table-column prop="email" label="邮箱" min-width="180" align="center" />
          <el-table-column label="操作" min-width="200px" align="center">
            <template v-slot="{row}">
              <el-button size="mini" @click="setRole(row.id)">设置角色</el-button>
              <el-button size="mini" @click="handleEdit(row.id)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件---------------------------- -->
        <el-pagination
          align="center"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <el-button type="text" />
      <!-- 父组件接受 -->
      <!-- 设置角色 -->
      <employeesRole ref="employeesRole" :show-role-dialog.sync="showRoleDialog" />
      <!-- 编辑用户信息 -->
      <editUser ref="editUser" :show-edit-dialog.sync="showEditDialog" @getEmployeesUser="getEmployeesUser" />

    </div>
  </div>
</template>

<script>
import { getEmployeesUser, deleteUser, userCount } from '@/api/employees'
import employeesRole from './components/index.vue'
import editUser from './components/editUser.vue'
export default {
  components: {
    employeesRole,
    editUser
  },
  data() {
    return {
      userInfo: [], // 用户详细信息
      showRoleDialog: false, // 设置角色弹框
      showEditDialog: false, // 编辑弹框
      limit: 10, // 控制请求多少条数据
      total: 0, // 控制用户数量
      start: 0, // 控制从哪条数据开始渲染
      currentPage4: 1 // 固定分页器页面(多少页)
    }
  },
  async created() {
    this.getEmployeesUser() // 获取全部用户信息
    this.total = await userCount() // 获取用户总数
  },
  methods: {
    addUserFn() {
      this.showEditDialog = true // 添加用户
    },
    handleSizeChange(val) {
      this.limit = val // 控制请求多少条数据
      this.getEmployeesUser() // 重新调用全部用户信息刷新页面
    },
    // 点击切换分页器按钮
    handleCurrentChange(val) {
      // val:页面页数
      this.currentPage4 = val // 点击切换固定分页器页面(多少页)
      this.start = (val - 1) * this.limit // 控制从哪条数据开始渲染
      this.getEmployeesUser() // 重新调用全部用户信息刷新页面
    },
    // 获取全部用户信息
    async getEmployeesUser() {
      const res = await getEmployeesUser({
        _limit: this.limit,
        _start: this.start
      })
      this.userInfo = res
    },
    // 设置角色
    setRole(id) {
      console.log(62, id)
      this.showRoleDialog = true // 弹框显示隐藏
      this.$refs.employeesRole.getEmployeesRole(id) // 获取指定指定用户信息
    },
    // 编辑
    handleEdit(id) {
      this.showEditDialog = true // 弹框显示隐藏
      this.$refs.editUser.getEmployeesRole(id) // 调用子组件点击函数
    },
    // 删除用户
    handleDelete(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '注意', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await deleteUser(id) // 删除用户接口
          this.getEmployeesUser() // 获取全部用户信息
          this.$message.success('删除成功!')
        })
        .catch(() => {
          this.$message.info('取消成功!')
        })
    }
  }
}
</script>

<style scoped>
.el-button {
  margin: 10px 40px 17px 0;
}
</style>
